page {
	height: 100vh;
	background-color: #efefef !important;
	display: flex;
	flex-direction: column;
	padding: 16rpx;
	box-sizing: border-box;

	>view {
		&:nth-child(n+2) {
			margin-top: 16rpx;
		}
	}
}

//轮播图区域样式
.swiper {
	border-radius: 10rpx;
	overflow: hidden;

	swiper {
		height: 360rpx;
		background-color: skyblue;

		swiper-item {
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			// &在sass中代表的是父选择器，引用的意思
			&:first-child {
				background-color: lightsalmon;
			}

			&:first-child {
				background-color: lightseagreen;
			}
		}
	}
}

//公司信息区域
.info {
	display: flex;
	justify-content: space-between;
	padding: 16rpx;
	border-radius: 10rpx;
	.iconfont {
		font-size: 24rpx;
	}
}

//商品导航区域
.good-nav {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 20rpx 16rpx;
	border-radius: 10rpx;

	view {
		navigator {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		image {
			width: 80rpx;
			height: 80rpx;
		}

		text {
			font-size: 24rpx;
			margin-top: 12rpx;
		}
	}
}

// 推荐商品区域
.good-hot {
	background-color: #fff;
	padding: 16rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	.scroll-x {
		width: 100%;
		white-space: nowrap;
		view {
			// 行内块元素
			display: inline-block;
			width: 320rpx;
			height: 440rpx;
			margin-right: 16rpx;
			.good-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text {
					&:nth-last-of-type(1) {
						font-weight: bold;
					}
				}
			}
			image {
				width: 100%;
				height: 320rpx;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}
}

// 横向滚动
// .scroll-x {
// 	width: 100%;
// 	white-space: nowrap;
// 	background-color: skyblue;
// 	view {
// 		display: inline-block;
// 		width: 300rpx;
// 		height: 80rpx;
// 		&:last-child {
// 			background-color: lightcoral;
// 		}
// 		&:first-child {
// 			background-color: lightseagreen;
// 		}
// 	}
// }
// 竖向滚动
// .scroll-y {
// 	height: 400rpx;
// 	background-color: skyblue;
// 	margin-top: 10rpx;
// 	view {
// 		height: 400rpx;
// 		&:last-child {
// 			background-color: lightcoral;
// 		}
// 		&:first-child {
// 			background-color: lightseagreen;
// 		}
// 	}
// }
